<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-09 21:11:59
 * @LastEditTime: 2020-06-07 20:49:21
 * @FilePath: \client\src\components\Tags.vue
 * @Description: 所有标签组件
 -->

<template>
  <b-card border-variant="light" align="left" class="mt-10">
    <span>全部标签</span>
    <hr />
    <b-link
      @click="getArticlesByTag(tag)"
      v-for="(tag,index) in tags"
      :key="index"
      class="link-icon"
    >
      <i class="icon iconfont icon-tag"></i>
      {{tag}}
    </b-link>
  </b-card>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
import url from "@/request/url";
export default {
  name: "Tags",
  data() {
    return {
      tags: null
    };
  },
  methods: {
    ...mapMutations(["setPageInfo", "setCurrentPage", "setCondition"]),
    ...mapActions(["getArticles"]),
    getArticlesByTag(tag) {
      this.setCondition({
        condition: "tag",
        data: tag
      });
      this.setCurrentPage(1);
      this.getArticles();
    }
  },
  created() {
    this.$axios.get(url.comm.tags).then(res => (this.tags = res.data));
  }
};
</script>
<style scoped>
.link-icon {
  text-decoration: none;
  display: inline-block;
  margin: 4px 10px;
}
</style>
